<template>
    <div>
        <avue-crud :data="productSourceList"
             :option="option"
             :page.sync="page"
             @current-change="currentChange"
             @size-change="sizeChange"
             :table-loading = loading
             @on-load="onLoad">
            <template slot="menu" slot-scope="scope">
<!--                <el-button type="text" style="font-size: 12px;">-->
<!--                    管理货源-->
<!--                </el-button>-->
<!--                <el-button type="text" style="font-size: 12px;" v-if="" @click="localBtn(scope.row.ticket.tradeName, scope.row.ticket)">-->
<!--                    采购链接-->
<!--                </el-button>-->
            </template>
            <template slot="product_name" slot-scope="scope">
                <div>
                    <span>{{scope.row.ticket.userName}}</span>
                </div>
            </template>
            <template slot="slot-img" slot-scope="scope">
                <!-- 第一部分 -->
                <div>
                    <div>
                        <div class="imgBox">
                            <div>
                                <!-- 图片位置 -->
                                <img class="img" :src="getImageUrl(scope.row.productInfo.image.images)"/>
                            </div>
                            <div class="imgBox_info">
                                <!-- 图片信息 -->
                                <div><span>{{scope.row.productInfo.subject}}</span></div>
                                <!-- 货号 -->
                                <div v-if = ""><span>商品ID：</span><span>{{scope.row.productInfo.productID}}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template slot="product_source" slot-scope="scope">
                <div>
                    <span>暂无货源</span>
                </div>
            </template>
        </avue-crud>
    </div>
</template>

<script>
import { getProductListByTicket } from '@/api/product_source/product_source'
export default {
    name: 'TicketSystemAdminContent',

    props: {
        productSourceList: {
            typeof: Array,
            default: []
        }
    },

    data() {
        return {
            page: {
                pageSize: 10,
                pagerCount: 5,
                currentPage: 1,
                total: 0,
            },
            data: [],
            // productSourceList: [],
            option: {
                addBtn: false,
                delBtn: false,
                editBtn: false,
                align: 'center',
                menuAlign: 'center',
                column: [
                    {
                        label: '店铺名称',
                        prop: 'product_name'
                    },
                    {
                        label: "商品信息",
                        prop: "slot-img",
                        headerAlign: "center",
                        minWidth: "80",
                        slot: true
                    },
                    {
                        label: '商品源',
                        prop: 'product_source'
                    }
                ]
            },
            loading: true,
            baseUrl: "https://pifa.pinduoduo.com/search"
        };
    },

    computed: {
        getImageUrl () {
            return (imageArr) => {
                const baseUrl = "https://cbu01.alicdn.com/"
                return baseUrl + imageArr[0]
            }
        }
    },

    mounted() {
        this.getProductList()
    },

    methods: {
        localBtn(productName, row) {
            let params = [
                { "orderId": row.id},
                { "shopName": row.userName},
                { "buyerName": row.buyerImPlatform},
                { "buyerPhone": row.mobile},
                { "buyerAddress": row.detailAddress},
                { "goodsImg": JSON.parse(row.imgUrl)[0]},
                { "goodsInfo": row.tradeName},
                { "goodsSpecifications": JSON.parse(row.specifications)[0].value},
                { "actualPrice": row.commodityPrice},
                { "goodsCount": row.commodityNum},
            ]
            this.baseUrl = this.baseUrl + "?word=" + productName
            let tempBaseUrl = this.baseUrl + "&"
            for (const iterator of params) {
                for (const key in iterator) {
                    tempBaseUrl += key + '=' + iterator[key] + '&'
                }
            }
            // window.location.href = tempBaseUrl
        },
        currentChange(page) {
            this.loading = true
            this.page.currentPage = page
            this.getProductList()
        },
        sizeChange(page) {
            this.loading = true
            this.page.pageSize = page
            this.getProductList()
        },
        async getProductList() {
            const { data } = await getProductListByTicket(this.page.currentPage, this.page.pageSize)
            if(data) {
                this.loading = false
                this.productSourceList = data.data.productSourceListByTicket
                this.page.total = data.data.total
            } else {
                setTimeout(() => {
                    this.loading = false
                }, 5000);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.imgBox{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    .imgBox_info {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        margin-left: 15px;
        text-align: left;
        & > div {
            width: 100%!important;
            margin: 15px 0;
        }
    }
    .img {
        max-width: 120px;
        max-height: 120px;
    }
}
</style>
